<template>
  <div class="table-content" v-loading="loading">
    <el-table
      :data="categoryList"
      tooltip-effect="dark" 
      class="test_table">
      <el-table-column 
        prop="categoryName"
        label="测试项"
        width="90"  
        align="center">
      </el-table-column>
      <el-table-column 
        prop="testContent"
        label="测试内容"
        align="center">
        <template slot-scope="scope">
          {{scope.row.testItem && scope.row.testItem.testContent || '暂无测试内容'}}
        </template>
      </el-table-column>
      <el-table-column 
        prop="testResult"
        label="测试结果"
        width="180"  
        align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.testItem && scope.row.testItem.trainStudentTestScoreDetail">
            {{scope.row.testItem.trainStudentTestScoreDetail.testScore + scope.row.testItem.trainStudentTestScoreDetail.testScoreDesc}}
            ( {{scope.row.testItem.trainStudentTestScoreDetail.testScoreLevel}} )
          </div>
          <span v-else>当前无成绩</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="140"
        align="center">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.testItem && scope.row.testItem.trainStudentTestScoreDetail" type="link">编辑</el-button>
          <el-button @click="handleEdit(scope.$index, scope.row)" v-else type="link">录入</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import filters from 'src/filters'
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  props: {
    testDate: {
      type: String
    }
  },
  computed: {
    ...mapGetters({
      studentDetailInfo: 'train_student_detail'
    }),
    studentId () {
      return this.$route.query.studentId
    }
  },
  data () {
    return {
      loading: false,
      categoryList: [] // 学员测试成绩项及成绩
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData (testData, ageId) {
      // this.studentDetailInfo 不是空对象
      // if (this.studentDetailInfo && isNaN(this.studentDetailInfo.id - 0)) {
      //   setTimeout(() => {
      //     this.initData(testData, ageId)
      //   }, 200)
      // } else {
      //   this.getStuItemScoreInfo(testData, ageId)
      // }
      this.getStuItemScoreInfo(testData, ageId)
    },
    getStuItemScoreInfo (testDate, ageId) {
      // 提供给父层调用 切换时间时
      this.loading = true
      ageId = ageId || this.studentDetailInfo.testAgeId // 默认传入  修改年龄组时需要
      testDate = testDate || this.testDate || filters.FormatDate(new Date().getTime(), 'yyyy-MM-dd')
      trainApi.getStuItemScoreInfo({
        sportType: 3002,
        testDateStr: testDate,
        studentId: this.studentDetailInfo.id,
        ageDictionarieId: ageId
      }).then(({data}) => {
        this.categoryList = data.categoryList || []
        this.$nextTick(() => {
          this.loading = false
        })
      })
    },
    handleDate (value) {
      this.getStuItemScoreInfo()
    },
    handleEdit (index, row) { // 编辑
      this.$router.push({
        path: '/training/student/test/edit',
        query: {
          studentId: this.studentId,
          testModeId: row.id, // 测试项ID
          testMethodId: row.testItem ? row.testItem.id : '' // 测试 内容ID
        }
      })
    },
    handleShowAgeDialog () {
      trainApi.getStudentTestAge().then(({data}) => {
        this.ageList = data || []
        this.ageDialogShow = true
      })
    },
    handleSumitAge () {
      this.validate(() => {
        let subData = {}
        subData.studentId = this.studentDetailInfo.id
        subData.testAgeId = this.form.ageValue
        trainApi.setStudentTestAge(subData).then(({data}) => {
          this.getStudentDetail()
          this.ageDialogShow = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  .student_test {
    margin-top: 55px;
    .avatar_img {
      .x-img {
        width: 120px;
        height: 120px;
        border: 1px solid #fff;
        border-radius: 50%;
      }
    }
    .grid-content {
      margin-bottom: 15px;
      .btn-edit{
        padding-left: 8px;
        width: 40px;
        min-width: auto;
        color: #24c881;
        cursor: pointer;
      }
      .age-dialog{
        .el-dialog{
          width: 400px;
          .el-dialog__body{
            text-align: center;
            .el-select{
              margin-top: 10px;
            }
            .btn-wrapper{
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
  .search_box {
    margin-top: 40px;
  }
  .test_table {
    .el-input__inner {
      height: 27px;
      width: 150px;
    }
    
  }
}
.standard_title {
  .el-popover__title {
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 15px;
  }
  .el-table {
    border: 1px solid #f2f2f2;
  }
  .el-table th, .el-table td {
    height: 30px;
  }
  .explain_rules {
    color: #999;
    padding: 5px;
  }
}
.option_value {
  float: right;
  color: #8492a6;
  font-size: 13px;
  &::after{
    content: ' >';
  }
}
</style>
